<template>
  <div class="flex" :style="{ width: width + 'px' }">
    <div v-if="label" class="pr-1" :class="labelClass">
      {{ label }}
      <span v-if="colon"> :</span>
    </div>
    <div class="flex-1 truncate pr-2" :class="valueClass">
      <a-tooltip v-if="tooltip" :title="value" placement="topLeft" :mouse-enter-delay="0.6">
        <span :title="value">{{ value || '-' }}</span>
      </a-tooltip>
      <span v-else :title="value">{{ value || '-' }}</span>
    </div>
  </div>
</template>
<script setup>
defineProps({
  label: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 160
  },
  tooltip: {
    type: Boolean,
    default: false
  },
  colon: {
    desc: '是否显示冒号',
    type: Boolean,
    default: true
  },
  labelClass: {
    type: String,
    default: ''
  },
  valueClass: {
    type: String,
    default: ''
  }
})
</script>
